<template>
    <div>
        <Pane>
            <template #title>账号添加</template>
            <template #content>
                <el-form 
                 :model="account" 
                 status-icon 
                 :rules="rules"
                 ref="accAddForm" 
                 label-width="100px" 
                 class="demo-ruleForm">
                    <el-form-item label="账号" prop="username">
                        <el-input v-model.trim="account.username"></el-input>
                    </el-form-item>

                    <el-form-item label="密码" prop="pwd">
                        <el-input type="password" v-model="account.pwd" autocomplete="off"></el-input>
                    </el-form-item>
                   
                    <el-form-item label="用户组" prop="group">
                        <el-select v-model="account.group" placeholder="请选择用户组">
                            <el-option label="普通用户" value="普通用户"></el-option>
                            <el-option label="超级管理员" value="超级管理员"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                    </el-form-item>
                </el-form>
                <!-- {{account}} -->
            </template>      
        </Pane>
    </div>
</template>

<script>
    import Pane from '@/components/Pane/Pane';
    import {add} from '@/api/account' //api工具函数，按需导入

    export default {
        components:{
            Pane
        },
        data(){
           return {
                //表单数据对象
                account:{
                    username:"",
                    pwd:"",
                    group:""
                },
                //验证规则对象
                rules:{
                    username:[
                        {required:true,message:"请输入账号",trigger:"blur"},
                        {min:3,max:10,message:"长度在3-10之间",trigger:"blur"}
                    ],
                    pwd:[
                        {required:true,message:"请输密码",trigger:"blur"},
                        {min:6,max:10,message:"长度在6-10之间",trigger:"blur"}
                    ],
                    group:[
                        {required:true,message:"请选择用户组",trigger:"change"}
                    ]
                }
           }
        },
        methods:{
            submitForm(){
                // console.log(this.account)
                // 触发整个表单的验证(validate 检测表单是否验证通过：true/false))
                this.$refs.accAddForm.validate(async (valid)=>{
                    console.log(valid)
                    if(valid){
                        //组装参数
                        let data = {
                            account:this.account.username,
                            password:this.account.pwd,
                            userGroup:this.account.group
                        };
                        //发请求
                        let ret = await add(data);//return Promise
                        console.log(ret) //{code: 0, msg: '添加账号成功!'}
                        //处理结果(是Promise，可以通过then...cathc 或 async+await来实现)
                        if(ret.code == 0){
                            this.$router.push("/account/account-list")//成功时，跳转到列表页
                        }
                        // console.log("ok")
                    } else{
                        console.log("error")
                    }
                });
            },
            resetForm(){
                this.$refs.accAddForm.resetFields();
            }
        }
    }
</script>

<style lang="less" scoped>

</style>